<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐搜索平台</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
            color: #fff;
            min-height: 100vh;
            padding: 20px;
            position: relative;
            overflow-x: hidden;
        }
        
        body::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.05) 0%, transparent 40%),
                        radial-gradient(circle at 80% 70%, rgba(255,255,255,0.05) 0%, transparent 40%);
            z-index: -1;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        header {
            text-align: center;
            padding: 40px 20px;
            animation: fadeInDown 1s ease;
        }
        
        .logo {
            font-size: 3rem;
            margin-bottom: 10px;
            color: #e94560;
        }
        
        h1 {
            font-size: 2.8rem;
            margin-bottom: 10px;
            background: linear-gradient(90deg, #e94560, #f9b208);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 2px 10px rgba(0,0,0,0.2);
        }
        
        .subtitle {
            font-size: 1.2rem;
            opacity: 0.8;
            max-width: 600px;
            margin: 0 auto;
            line-height: 1.6;
        }
        
        .search-section {
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 30px;
            margin: 30px auto;
            max-width: 800px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.1);
            animation: slideUp 1s ease;
        }
        
        .search-box {
            display: flex;
            gap: 15px;
        }
        
        .search-box input {
            flex: 1;
            padding: 15px 20px;
            border: none;
            border-radius: 50px;
            background: rgba(255, 255, 255, 0.1);
            color: white;
            font-size: 1.1rem;
            outline: none;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }
        
        .search-box input:focus {
            background: rgba(255, 255, 255, 0.15);
            box-shadow: 0 4px 20px rgba(233, 69, 96, 0.3);
        }
        
        .search-box input::placeholder {
            color: rgba(255, 255, 255, 0.5);
        }
        
        .search-btn {
            padding: 15px 30px;
            background: linear-gradient(90deg, #e94560, #f9b208);
            border: none;
            border-radius: 50px;
            color: white;
            font-size: 1.1rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(233, 69, 96, 0.4);
        }
        
        .search-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(233, 69, 96, 0.6);
        }
        
        .results-section {
            display: none;
            margin: 40px 0;
            animation: fadeIn 0.8s ease;
        }
        
        .section-title {
            font-size: 1.8rem;
            margin-bottom: 25px;
            display: flex;
            align-items: center;
            gap: 10px;
            color: #f9b208;
        }
        
        .results-list {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.05);
        }
        
        .list-header {
            display: grid;
            grid-template-columns: 80px 1fr 1fr 1fr 150px;
            padding: 15px 20px;
            background: rgba(255, 255, 255, 0.1);
            font-weight: bold;
            color: #f9b208;
        }
        
        .song-item {
            display: grid;
            grid-template-columns: 80px 1fr 1fr 1fr 150px;
            padding: 15px 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            transition: all 0.3s ease;
            align-items: center;
        }
        
        .song-item:hover {
            background: rgba(255, 255, 255, 0.1);
        }
        
        .song-item:last-child {
            border-bottom: none;
        }
        
        .song-id {
            color: #e94560;
            font-weight: bold;
        }
        
        .song-title {
            font-weight: bold;
            word-break: break-word;
            overflow-wrap: break-word;
        }
        
        .song-artist, .song-album {
            color: rgba(255, 255, 255, 0.8);
        }
        
        .song-actions {
            display: flex;
            gap: 10px;
        }
        
        .play-btn, .download-btn {
            padding: 8px 15px;
            border-radius: 5px;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .play-btn {
            background: rgba(233, 69, 96, 0.2);
            color: white;
        }
        
        .play-btn:hover {
            background: rgba(233, 69, 96, 0.8);
        }
        
        .download-btn {
            background: rgba(249, 178, 8, 0.2);
            color: white;
            text-decoration: none;
        }
        
        .download-btn:hover {
            background: rgba(249, 178, 8, 0.8);
        }
        
        .no-results {
            text-align: center;
            padding: 40px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 15px;
            margin: 20px 0;
        }
        
        .no-results i {
            font-size: 3rem;
            margin-bottom: 20px;
            color: #e94560;
        }
        
        .player {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background: rgba(10, 15, 30, 0.95);
            backdrop-filter: blur(10px);
            padding: 15px;
            display: none;
            box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.4);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            z-index: 1000;
        }
        
        .player-content {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            gap: 20px;
        }
        
        .now-playing {
            display: flex;
            align-items: center;
            gap: 15px;
            flex: 1;
        }
        
        .player-album-art {
            width: 60px;
            height: 60px;
            background: linear-gradient(45deg, #e94560, #f9b208);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: rgba(255, 255, 255, 0.3);
        }
        
        .player-song-info .title {
            font-size: 1.1rem;
            font-weight: bold;
        }
        
        .player-song-info .artist {
            font-size: 0.9rem;
            color: #f9b208;
        }
        
        .player-controls {
            flex: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }
        
        .progress-container {
            width: 100%;
            height: 5px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 5px;
            cursor: pointer;
        }
        
        .progress-bar {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, #e94560, #f9b208);
            border-radius: 5px;
            transition: width 0.1s linear;
        }
        
        .controls {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .control-btn {
            background: none;
            border: none;
            color: white;
            font-size: 1.2rem;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .control-btn:hover {
            color: #f9b208;
        }
        
        .play-pause {
            font-size: 2rem;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(233, 69, 96, 0.3);
        }
        
        .play-pause:hover {
            background: rgba(233, 69, 96, 0.6);
            transform: scale(1.1);
        }
        
        .time {
            display: flex;
            justify-content: space-between;
            width: 100%;
            font-size: 0.8rem;
            color: rgba(255, 255, 255, 0.6);
        }
        
        .player-right-controls {
            flex: 1;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 15px;
        }
        
        .volume-control, .speed-control, .playmode-control {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .volume-slider, .speed-select {
            width: 80px;
            -webkit-appearance: none;
            height: 5px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 5px;
            outline: none;
        }
        
        .volume-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: #f9b208;
            cursor: pointer;
        }
        
        .speed-select {
            height: 30px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            color: white;
            padding: 0 10px;
            font-size: 0.9rem;
        }
        
        .playmode-btn {
            background: none;
            border: none;
            color: white;
            font-size: 1.2rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .playmode-btn:hover, .playmode-btn.active {
            color: #f9b208;
        }
        
        footer {
            text-align: center;
            padding: 30px;
            margin-top: 30px;
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.9rem;
        }
        
        /* 歌词容器样式 */
        .lyrics-container {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 15px;
            padding: 20px;
            margin-top: 30px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .lyrics-content {
            max-height: 300px;
            overflow-y: auto;
            padding: 10px;
            line-height: 2;
            text-align: center;
        }

        .lyrics-content p {
            margin: 10px 0;
            color: rgba(255, 255, 255, 0.8);
            transition: all 0.3s ease;
        }

        .lyrics-content p.active {
            color: #f9b208;
            font-size: 1.1em;
            font-weight: bold;
            text-shadow: 0 0 10px rgba(249, 178, 8, 0.5);
        }

        .empty-lyrics {
            text-align: center;
            color: rgba(255, 255, 255, 0.5);
            font-style: italic;
        }

        /* 滚动条样式 */
        .lyrics-content::-webkit-scrollbar {
            width: 6px;
        }

        .lyrics-content::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 3px;
        }

        .lyrics-content::-webkit-scrollbar-thumb {
            background: rgba(233, 69, 96, 0.5);
            border-radius: 3px;
        }

        .lyrics-content::-webkit-scrollbar-thumb:hover {
            background: rgba(233, 69, 96, 0.8);
        }
        
        /* Animations */
        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        
        /* Responsive */
        @media (max-width: 968px) {
            .list-header, .song-item {
                grid-template-columns: 60px 1fr 1fr 120px;
            }
            
            .song-album {
                display: none;
            }
            
            .player-content {
                flex-direction: column;
                gap: 15px;
            }
            
            .now-playing, .player-right-controls {
                width: 100%;
            }
            
            .player-controls {
                width: 100%;
            }
            
            h1 {
                font-size: 2.2rem;
            }
            
            .player-right-controls {
                justify-content: center;
            }
        }
        
        @media (max-width: 768px) {
            .search-box {
                flex-direction: column;
            }
            
            .list-header, .song-item {
                grid-template-columns: 50px 1fr 90px;
            }
            
            .song-artist {
                display: none;
            }
            
            .song-actions {
                flex-direction: column;
                gap: 5px;
            }
        }
    </style>
    <script type="text/javascript">
    (function(c,l,a,r,i,t,y){
        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
    })(window, document, "clarity", "script", "rh9kdjgzpw");
    </script>
</head>
<body>
    <div class="container">
        <header>
            <div class="logo">
                <i class="fas fa-music"></i>
            </div>
            <h1>音乐搜索平台</h1>
            <p class="subtitle">探索并聆听来自世界各地的音乐作品。输入歌手、歌曲名或专辑进行搜索，发现属于你的音乐之旅。</p>
        </header>
        
        <section class="search-section">
            <div class="search-box">
                <input type="text" id="searchInput" placeholder="输入歌手、歌曲名或专辑...">
                <button class="search-btn" id="searchBtn">
                    <i class="fas fa-search"></i> 搜索音乐
                </button>
            </div>
        </section>
        
        <section class="results-section" id="resultsSection">
            <h2 class="section-title">
                <i class="fas fa-headphones"></i> 搜索结果
                <span id="resultsCount"></span>
            </h2>
            <div class="results-list">
                <div class="list-header">
                    <div>ID</div>
                    <div>歌曲标题</div>
                    <div>歌手</div>
                    <div>专辑</div>
                    <div>操作</div>
                </div>
                <div id="resultsList"></div>
            </div>

            <!-- 歌词容器 -->
            <div class="lyrics-container" id="lyricsContainer" style="display: none;">
                <h2 class="section-title">
                    <i class="fas fa-align-left"></i> 歌词
                </h2>
                <div class="lyrics-content" id="lyricsContent">
                    <p class="empty-lyrics">暂无歌词</p>
                </div>
            </div>
        </section>
        
        <div class="no-results" id="noResults" style="display: none;">
            <i class="fas fa-exclamation-circle"></i>
            <h3>没有找到相关歌曲</h3>
            <p>请尝试不同的搜索关键词</p>
        </div>
    </div>
    
    <div class="player" id="player">
        <div class="player-content">
            <div class="now-playing">
                <div class="player-album-art">
                    <i class="fas fa-music"></i>
                </div>
                <div class="player-song-info">
                    <div class="title" id="playerTitle">歌曲标题</div>
                    <div class="artist" id="playerArtist">歌手</div>
                </div>
            </div>
            
            <div class="player-controls">
                <div class="controls">
                    <button class="control-btn" id="prevBtn">
                        <i class="fas fa-step-backward"></i>
                    </button>
                    <button class="control-btn play-pause" id="playPauseBtn">
                        <i class="fas fa-play"></i>
                    </button>
                    <button class="control-btn" id="nextBtn">
                        <i class="fas fa-step-forward"></i>
                    </button>
                </div>
                <div class="progress-container" id="progressContainer">
                    <div class="progress-bar" id="progressBar"></div>
                </div>
                <div class="time">
                    <span id="currentTime">0:00</span>
                    <span id="duration">0:00</span>
                </div>
            </div>
            
            <div class="player-right-controls">
                <div class="volume-control">
                    <button class="control-btn">
                        <i class="fas fa-volume-up"></i>
                    </button>
                    <input type="range" class="volume-slider" id="volumeSlider" min="0" max="1" step="0.01" value="0.7">
                </div>
                
                <div class="speed-control">
                    <i class="fas fa-tachometer-alt"></i>
                    <select class="speed-select" id="speedSelect">
                        <option value="0.5">0.5x</option>
                        <option value="0.75">0.75x</option>
                        <option value="1" selected>1x</option>
                        <option value="1.25">1.25x</option>
                        <option value="1.5">1.5x</option>
                        <option value="2">2x</option>
                    </select>
                </div>
                
                <div class="playmode-control">
                    <button class="playmode-btn" id="playmodeBtn" title="顺序播放">
                        <i class="fas fa-repeat"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <footer>
        <p>&copy; 2023 音乐搜索平台 | 探索无限音乐世界</p>
    </footer>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const searchBtn = document.getElementById('searchBtn');
            const searchInput = document.getElementById('searchInput');
            const resultsSection = document.getElementById('resultsSection');
            const resultsList = document.getElementById('resultsList');
            const noResults = document.getElementById('noResults');
            const resultsCount = document.getElementById('resultsCount');
            
            const player = document.getElementById('player');
            const playPauseBtn = document.getElementById('playPauseBtn');
            const playerTitle = document.getElementById('playerTitle');
            const playerArtist = document.getElementById('playerArtist');
            const progressBar = document.getElementById('progressBar');
            const progressContainer = document.getElementById('progressContainer');
            const currentTimeEl = document.getElementById('currentTime');
            const durationEl = document.getElementById('duration');
            const volumeSlider = document.getElementById('volumeSlider');
            const speedSelect = document.getElementById('speedSelect');
            const playmodeBtn = document.getElementById('playmodeBtn');
            
            let currentAudio = null;
            let currentSongIndex = -1;
            let songs = [];
            let lyrics = [];
            let currentLyricIndex = 0;
            let playMode = 'sequence'; // 播放模式：sequence(顺序), single(单曲循环), random(随机)
            
            // 初始化播放模式按钮
            updatePlaymodeButton();
            
            // 搜索功能
            searchBtn.addEventListener('click', performSearch);
            searchInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    performSearch();
                }
            });
            
            // 检查URL参数
            function checkUrlParams() {
                const urlParams = new URLSearchParams(window.location.search);
                const id = urlParams.get('id');
                const keyword = urlParams.get('keyword');
                
                if (id) {
                    // 通过ID获取歌曲
                    searchInput.value = id;
                    fetchSongById(id);
                } else if (keyword) {
                    // 通过关键词搜索
                    searchInput.value = keyword;
                    performSearch();
                } else {
                    // 默认搜索
                    searchInput.value = '流行';
                    setTimeout(performSearch, 1000);
                }
            }
            
            // 通过ID获取歌曲
            function fetchSongById(id) {
                resultsList.innerHTML = '<div class="song-item">加载中...</div>';
                resultsSection.style.display = 'block';
                noResults.style.display = 'none';
                
                const xhr = new XMLHttpRequest();
                xhr.open('GET', 'api.php?id=' + encodeURIComponent(id), true);
                
                xhr.onload = function() {
                    if (xhr.status === 200) {
                        try {
                            const response = JSON.parse(xhr.responseText);
                            displayResults(response);
                            if (response.results && response.results.length > 0) {
                                // 自动播放第一首歌曲
                                setTimeout(() => playSong(0), 500);
                            }
                        } catch (e) {
                            showError('解析响应时出错');
                        }
                    } else {
                        showError('请求失败: ' + xhr.status);
                    }
                };
                
                xhr.onerror = function() {
                    showError('网络错误，请重试');
                };
                
                xhr.send();
            }
            
            function performSearch() {
                const keyword = searchInput.value.trim();
                
                if (keyword.match(/^\d+$/)) {
                    // 如果是纯数字，尝试按ID搜索
                    fetchSongById(keyword);
                    return;
                }
                
                // 显示加载状态
                resultsList.innerHTML = '<div class="song-item">搜索中...</div>';
                resultsSection.style.display = 'block';
                noResults.style.display = 'none';
                
                // 创建 AJAX 请求
                const xhr = new XMLHttpRequest();
                xhr.open('GET', 'api.php?keyword=' + encodeURIComponent(keyword), true);
                
                xhr.onload = function() {
                    if (xhr.status === 200) {
                        try {
                            const response = JSON.parse(xhr.responseText);
                            displayResults(response);
                            
                            // 检查URL是否有keyword参数，如果有则自动播放第一首
                            const urlParams = new URLSearchParams(window.location.search);
                            if (urlParams.get('keyword') && response.results && response.results.length > 0) {
                                setTimeout(() => playSong(0), 500);
                            }
                        } catch (e) {
                            showError('解析响应时出错');
                        }
                    } else {
                        showError('请求失败: ' + xhr.status);
                    }
                };
                
                xhr.onerror = function() {
                    showError('网络错误，请重试');
                };
                
                xhr.send();
            }
            
            function displayResults(response) {
                if (response.status === 'success') {
                    songs = response.results;
                    
                    if (songs.length > 0) {
                        resultsList.innerHTML = '';
                        resultsCount.textContent = ` (${songs.length} 首歌曲)`;
                        
                        songs.forEach((song, index) => {
                            const songItem = document.createElement('div');
                            songItem.className = 'song-item';
                            songItem.innerHTML = `
                                <div class="song-id">${song.id || 'N/A'}</div>
                                <div class="song-title">${song.title}</div>
                                <div class="song-artist">${song.artist}</div>
                                <div class="song-album">${song.album}</div>
                                <div class="song-actions">
                                    <button class="play-btn" data-index="${index}">
                                        <i class="fas fa-play"></i> 播放
                                    </button>
                                    <a href="${song.mp3_url}" class="download-btn" target="_blank">
                                        <i class="fas fa-download"></i> 下载
                                    </a>
                                </div>
                            `;
                            resultsList.appendChild(songItem);
                        });
                        
                        // 添加播放按钮事件
                        document.querySelectorAll('.play-btn').forEach(btn => {
                            btn.addEventListener('click', function() {
                                const index = parseInt(this.getAttribute('data-index'));
                                playSong(index);
                            });
                        });
                        
                        resultsSection.style.display = 'block';
                        noResults.style.display = 'none';
                    } else {
                        resultsSection.style.display = 'none';
                        noResults.style.display = 'block';
                    }
                } else {
                    showError(response.message || '搜索失败');
                }
            }
            
            function loadLyrics(url) {
                const lyricsContent = document.getElementById('lyricsContent');
                lyricsContent.innerHTML = '<p class="empty-lyrics">加载歌词中...</p>';
                document.getElementById('lyricsContainer').style.display = 'block';
                
                fetch(url)
                    .then(response => {
                        if (!response.ok) throw new Error('歌词加载失败');
                        return response.text();
                    })
                    .then(text => {
                        lyrics = parseLRC(text);
                        displayLyrics();
                    })
                    .catch(error => {
                        console.error('歌词加载失败:', error);
                        lyricsContent.innerHTML = '<p class="empty-lyrics">暂无歌词</p>';
                        lyrics = [];
                    });
            }

            // 解析LRC格式歌词
            function parseLRC(lrcText) {
                const lines = lrcText.split('\n');
                const result = [];
                const timeRegex = /\[(\d{2}):(\d{2})\.(\d{2,3})\]/g;
                
                lines.forEach(line => {
                    const times = [...line.matchAll(timeRegex)];
                    const text = line.replace(timeRegex, '').trim();
                    
                    if (text && times.length > 0) {
                        times.forEach(([_, minutes, seconds, milliseconds]) => {
                            const time = parseInt(minutes) * 60 + 
                                         parseInt(seconds) + 
                                         parseInt(milliseconds) / (milliseconds.length === 2 ? 100 : 1000);
                            result.push({ time, text });
                        });
                    }
                });
                
                // 按时间排序
                return result.sort((a, b) => a.time - b.time);
            }

            // 显示歌词
            function displayLyrics() {
                const lyricsContent = document.getElementById('lyricsContent');
                
                if (lyrics.length === 0) {
                    lyricsContent.innerHTML = '<p class="empty-lyrics">暂无歌词</p>';
                    return;
                }
                
                lyricsContent.innerHTML = '';
                lyrics.forEach((lyric, index) => {
                    const p = document.createElement('p');
                    p.textContent = lyric.text;
                    p.dataset.index = index;
                    lyricsContent.appendChild(p);
                });
            }

            // 重置歌词状态
            function resetLyrics() {
                lyrics = [];
                currentLyricIndex = 0;
                const lyricsContent = document.getElementById('lyricsContent');
                lyricsContent.innerHTML = '<p class="empty-lyrics">加载歌词中...</p>';
            }

            // 同步歌词高亮（优化版）
            function syncLyrics(currentTime) {
                // 使用二分查找提高性能，特别是对于长歌词文件
                let low = 0;
                let high = lyrics.length - 1;
                let newIndex = 0;
                
                while (low <= high) {
                    const mid = Math.floor((low + high) / 2);
                    if (lyrics[mid].time <= currentTime) {
                        newIndex = mid;
                        low = mid + 1;
                    } else {
                        high = mid - 1;
                    }
                }
                
                // 如果歌词行发生变化，更新高亮
                if (newIndex !== currentLyricIndex) {
                    const lyricsContent = document.getElementById('lyricsContent');
                    const allLyrics = lyricsContent.querySelectorAll('p');
                    
                    if (currentLyricIndex >= 0 && currentLyricIndex < allLyrics.length) {
                        allLyrics[currentLyricIndex].classList.remove('active');
                    }
                    
                    if (newIndex >= 0 && newIndex < allLyrics.length) {
                        allLyrics[newIndex].classList.add('active');
                        allLyrics[newIndex].scrollIntoView({
                            behavior: 'smooth',
                            block: 'center'
                        });
                    }
                    
                    currentLyricIndex = newIndex;
                }
            }
            
            function showError(message) {
                resultsSection.style.display = 'none';
                noResults.style.display = 'block';
                noResults.innerHTML = `
                    <i class="fas fa-exclamation-triangle"></i>
                    <h3>发生错误</h3>
                    <p>${message}</p>
                `;
            }
            
            function playSong(index) {
                if (currentAudio) {
                    currentAudio.pause();
                }
                
                currentSongIndex = index;
                const song = songs[index];
                
                // 更新播放器信息
                playerTitle.textContent = song.title;
                playerArtist.textContent = song.artist;
                
                // 创建音频对象
                currentAudio = new Audio(song.mp3_url);
                currentAudio.volume = volumeSlider.value;
                currentAudio.playbackRate = parseFloat(speedSelect.value);
                
                // 重置歌词状态
                resetLyrics();
                
                // 尝试加载歌词（假设歌词URL是 mp3_url 替换为 .lrc）
                const lrcUrl = song.mp3_url.replace('.mp3', '.lrc');
                loadLyrics(lrcUrl);
                
                // 更新播放按钮图标
                playPauseBtn.innerHTML = '<i class="fas fa-pause"></i>';
                
                // 显示播放器和歌词容器
                player.style.display = 'block';
                document.getElementById('lyricsContainer').style.display = 'block';
                
                // 播放音频
                currentAudio.play();
                
                // 更新进度条
                currentAudio.addEventListener('timeupdate', updateProgress);
                
                // 当音频可以播放时更新持续时间
                currentAudio.addEventListener('loadedmetadata', function() {
                    durationEl.textContent = formatTime(currentAudio.duration);
                });
                
                // 确保歌词容器在可视区域内
                setTimeout(() => {
                    document.getElementById('lyricsContainer').scrollIntoView({
                        behavior: 'smooth'
                    });
                }, 300);
                
                // 音频结束事件
                currentAudio.addEventListener('ended', function() {
                    handleSongEnded();
                });
            }
            
            function updateProgress() {
                const percent = (currentAudio.currentTime / currentAudio.duration) * 100;
                progressBar.style.width = `${percent}%`;
                currentTimeEl.textContent = formatTime(currentAudio.currentTime);
                
                // 歌词同步
                if (lyrics.length > 0) {
                    syncLyrics(currentAudio.currentTime);
                }
            }
            
            function formatTime(seconds) {
                const mins = Math.floor(seconds / 60);
                const secs = Math.floor(seconds % 60);
                return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
            }
            
            // 处理歌曲结束
            function handleSongEnded() {
                if (playMode === 'single') {
                    // 单曲循环
                    currentAudio.currentTime = 0;
                    currentAudio.play();
                } else if (playMode === 'random') {
                    // 随机播放
                    const randomIndex = Math.floor(Math.random() * songs.length);
                    playSong(randomIndex);
                } else {
                    // 顺序播放
                    playNext();
                }
            }
            
            // 进度条点击事件
            progressContainer.addEventListener('click', function(e) {
                if (!currentAudio) return;
                
                const width = this.clientWidth;
                const clickX = e.offsetX;
                const duration = currentAudio.duration;
                
                currentAudio.currentTime = (clickX / width) * duration;
            });
            
            // 播放/暂停按钮
            playPauseBtn.addEventListener('click', function() {
                if (!currentAudio) return;
                
                if (currentAudio.paused) {
                    currentAudio.play();
                    this.innerHTML = '<i class="fas fa-pause"></i>';
                } else {
                    currentAudio.pause();
                    this.innerHTML = '<i class="fas fa-play"></i>';
                }
            });
            
            // 下一首按钮
            document.getElementById('nextBtn').addEventListener('click', playNext);
            
            function playNext() {
                if (songs.length === 0) return;
                
                let nextIndex;
                if (playMode === 'random') {
                    nextIndex = Math.floor(Math.random() * songs.length);
                } else {
                    nextIndex = (currentSongIndex + 1) % songs.length;
                }
                playSong(nextIndex);
            }
            
            // 上一首按钮
            document.getElementById('prevBtn').addEventListener('click', function() {
                if (songs.length === 0) return;
                
                let prevIndex = currentSongIndex - 1;
                if (prevIndex < 0) prevIndex = songs.length - 1;
                playSong(prevIndex);
            });
            
            // 音量控制
            volumeSlider.addEventListener('input', function() {
                if (currentAudio) {
                    currentAudio.volume = this.value;
                }
            });
            
            // 播放速度控制
            speedSelect.addEventListener('change', function() {
                if (currentAudio) {
                    currentAudio.playbackRate = parseFloat(this.value);
                }
            });
            
            // 播放模式切换
            playmodeBtn.addEventListener('click', function() {
                if (playMode === 'sequence') {
                    playMode = 'single';
                } else if (playMode === 'single') {
                    playMode = 'random';
                } else {
                    playMode = 'sequence';
                }
                updatePlaymodeButton();
            });
            
            // 更新播放模式按钮
            function updatePlaymodeButton() {
                let icon, title;
                if (playMode === 'sequence') {
                    icon = 'fas fa-repeat';
                    title = '顺序播放';
                } else if (playMode === 'single') {
                    icon = 'fas fa-repeat-1';
                    title = '单曲循环';
                } else {
                    icon = 'fas fa-random';
                    title = '随机播放';
                }
                
                playmodeBtn.innerHTML = `<i class="${icon}"></i>`;
                playmodeBtn.title = title;
            }
            
            // 初始化页面
            checkUrlParams();
        });
    </script>
</body>
</html>